<template>
	<echartBox title="热线情况" width="633px" height="466px">
		<div class="echart-show" ref="chart"></div>
	</echartBox>
</template>

<script>
import * as echarts from "echarts";
import echartBox from "../echart-box.vue";

export default {
	name: "Page1ItemBox9",
	components: {
		echartBox,
	},
	props: {
		chartData: {
			type: Array,
			required: true,
			default: () => [],
		},
	},
	methods: {
		// 初始化图表的统一方法名
		initChart() {
			this.buildHotlineChart();
		},
		// 构建热线情况柱状图
		buildHotlineChart() {
			let _labelList = this.chartData.map((item) => item.name);
			let _valueList = this.chartData.map((item) => item.value);
			let chartContainer = this.$refs.chart;
			let myChart = echarts.init(chartContainer);

			const option = {
				backgroundColor: "transparent",
				tooltip: {
					show: true,
					trigger: "axis", //axis , item
					backgroundColor: "RGBA(0, 49, 85, 1)",
					borderColor: "rgba(0, 151, 251, 1)",
					borderWidth: 1,
					borderRadius: 0,
					textStyle: {
						color: "#BCE9FC",
						fontSize: 16,
						align: "left",
					},
					"formatter": function(param) {
						return param[0].name  + '<br>' + param[0].value
						},
					},
				grid: {
					left: "8%",
					right: "1%",
					bottom: "1%",
					top: "16%",
					containLabel: true,
				},
				xAxis: {
					type: "category",
					data: _labelList,
					axisLine: {
						show: true,
						lineStyle: {
							color: "rgba(255, 255, 255, 0.3)",
						},
					},
					axisTick: {
						show: false,
					},
					axisLabel: {
						color: "#fff",
						fontSize: 16,
					},
				},
				yAxis: {
					name: '单位：万/m³',
					nameTextStyle: {
						color:'#fff'
					},
					type: "value",
					max: 500,
					axisLine: {
						show: false,
					},
					axisTick: {
						show: false,
					},
					splitLine: {
						show: true,
						lineStyle: {
							color: "rgba(255, 255, 255, 0.1)",
							type: "dashed",
						},
					},
					axisLabel: {
						color: "#fff",
						fontSize: 16,
					},
				},
				series: [
					// {
					// 	type: "bar",
					// 	data: _valueList,
					// 	barWidth: "17px",
					// 	itemStyle: {
					// 		color: {
					// 			type: "linear",
					// 			x: 0,
					// 			y: 0,
					// 			x2: 0,
					// 			y2: 1,
					// 			colorStops: [
					// 				{
					// 					offset: 0,
					// 					color: "#00d4ff",
					// 				},
					// 				{
					// 					offset: 0.5,
					// 					color: "#0099cc",
					// 				},
					// 				{
					// 					offset: 1,
					// 					color: "#006699",
					// 				},
					// 			],
					// 		},
					// 		borderRadius: [4, 4, 0, 0],
					// 		shadowColor: "#00d4ff",
					// 		shadowBlur: 8,
					// 	},
					// 	emphasis: {
					// 		itemStyle: {
					// 			color: {
					// 				type: "linear",
					// 				x: 0,
					// 				y: 0,
					// 				x2: 0,
					// 				y2: 1,
					// 				colorStops: [
					// 					{
					// 						offset: 0,
					// 						color: "#00ffff",
					// 					},
					// 					{
					// 						offset: 0.5,
					// 						color: "#00ccee",
					// 					},
					// 					{
					// 						offset: 1,
					// 						color: "#0088bb",
					// 					},
					// 				],
					// 			},
					// 		},
					// 	},
					// },
					{
						// name: "增长率",
						type: "bar",
						z: 10,
						itemStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(
									0,
									0,
									1,
									0,
									[
										{
											offset: 0,
											color: "rgba(129,212,250,0.4)",
										},
										{
											offset: 1,
											color: "rgba(57,183,251,1)",
										},
									]
								),
							},
						},
						barWidth: 20,
						data: _valueList,
                        // showBackground: true,
                        // backgroundStyle: {
                        //     color: 'rgba(0, 63, 116, 1)'
                        // }
					},
					// {
					// 	name: "背景",
					// 	type: "bar",
					// 	barWidth: 20,
					// 	z: 1,
					// 	barGap: "-100%",
					// 	data: _valueList,
					// 	itemStyle: {
					// 		normal: {
					// 			color: "rgba(23,44,91)",
					// 		},
					// 	},
					// },
					{
						//分隔
						type: "pictorialBar",
						z: 100,
						itemStyle: {
							color: "#0f185e",
						},
						symbolRepeat: "fixed",
						symbolMargin: 4,
						symbol: "rect",
						symbolClip: true,
						symbolSize: [20, 3],
						symbolPosition: "start",
						symbolOffset: [0, 0],
						data: _valueList,
						animationEasing: "elasticOut",
					},
				],
			};

			myChart.setOption(option);
		},
	},
};
</script>

<style scoped lang="scss">
.echart-show {
	width: 100%;
	height: 100%;
}
</style>